<template>
	<div class="app-wrapper">
		<!-- 顶部导航栏 -->
		<header-component @collapse-change="handleCollapseChange" />

		<div class="main-wrapper">
			<!-- 左侧菜单栏 -->
			<sidebar-component :is-collapse="isCollapse" />

			<!-- 主内容区域 -->
			<main-content-component :is-collapse="isCollapse" />
		</div>
	</div>
</template>

<script>
	import HeaderComponent from './Header.vue'
	import SidebarComponent from './Sidebar.vue'
	import MainContentComponent from './MainContent.vue'

	export default {
		components: {
			HeaderComponent,
			SidebarComponent,
			MainContentComponent
		},
		data() {
			return {
				isCollapse: false
			}
		},
		methods: {
			handleCollapseChange(isCollapse) {
				this.isCollapse = isCollapse
			}
		}
	}
</script>

<style>
	.app-wrapper {
		position: relative;
		height: 100%;
		width: 100%;
	}

	.main-wrapper {
		padding-top: 60px;
		height: 80%;
		box-sizing: border-box;
	}
</style>